<template>
	<view class="detail">
		<view class="bj">
			<view class="flex">
				<view class="type">
					<template
						v-if="userInfo.now_role == 2&&orderDetail.driver_apply_status == 2 || userInfo.now_role == 2&&orderDetail.driver_apply_status == 3">
						{{ orderDetail.driver_apply_status ==2?'未选中':'待确认' }}
					</template>
					<template v-else>
						{{ orderDetail.status == 1?'待接单':orderDetail.status == 2?'待取件':orderDetail.status == 3?'送件中':orderDetail.status == 4?'待评价':orderDetail.status == 5?'已完成':orderDetail.status == 6?'用户取消':orderDetail.status == 7?'司机取消':orderDetail.status == 8?'平台取消':''}}
					</template>
				</view>
				<view class="price" v-if="userInfo.now_role == 2">
					<image @click="ExpenseBreakdownRef.handleClick()" src="@/static/image/matter.png"></image>
					￥<span>{{ orderDetail.order_total_amount }}</span>
				</view>
				<template v-if="userInfo.now_role === 1">
					<CancelOrder :id="orderDetail.id" v-if="orderDetail.status == 1 || orderDetail.status == 2" />
					<view class="price"
						v-if="orderDetail.status == 3 || orderDetail.status == 4 || orderDetail.status == 5">
						<image @click="ExpenseBreakdownRef.handleClick()" src="@/static/image/matter.png"></image>
						￥<span>{{ orderDetail.order_total_amount }}</span>
					</view>
				</template>
			</view>
			<view class="flex">
				<view class="desc">
					如有注意事项，请提前打电话告知{{userInfo.now_role==1?'司机':'客户'}}
				</view>
			</view>
			<view class="receiver" v-if="orderDetail.driver_id != 0">
				<view class="left" v-if="userInfo.now_role == 2">
					<image :src="orderDetail?.user_info?.avatar"></image>
					<view class="user">
						<view class="name">
							{{ orderDetail?.user_info?.name }}
						</view>
						<view class="plate">
							{{ orderDetail?.user_info?.car_plate }}
						</view>
					</view>
				</view>
				<view class="left" v-if="userInfo.now_role == 1">
					<image :src="orderDetail?.driver_info?.avatar"></image>
					<view class="user">
						<view class="name">
							{{ orderDetail?.driver_info?.name }}
						</view>
						<view class="plate">
							{{ orderDetail?.driver_info?.car_plate }}
						</view>
					</view>
				</view>
				<image
					@click="handleDial(userInfo.now_role == 2?orderDetail.user_info.phone:orderDetail.driver_info.phone)"
					class="dial" mode="widthFix" src="@/static/image/dial.png"></image>
			</view>
			<view class="time">
				出行时间：{{ orderDetail.create_time }}
			</view>
			<view class="flex justify-between">
				<view class="pat">
					<view class="label">{{ orderDetail.delivery_type }}</view>
					{{ orderDetail.tips }}
				</view>
				<template v-if="userInfo.now_role == 2">
					<CancelOrder :id="orderDetail.id"
						v-if="orderDetail.driver_apply_status  == 1 && orderDetail.status == 2 || orderDetail.driver_apply_status == 3" />
				</template>
			</view>
			<view class="desc">
				{{ orderDetail.order_remark }}
			</view>
			<view class="line-list">
				<view class="line" v-for="(item, index) in orderDetail.attention_item" :key="index">
					{{ item }}
				</view>
				<view class="i"></view>
			</view>
			<view class="address">
				<image src="@/static/image/ji.png"></image>
				<view class="right">
					<view class="name">
						<view class="text">
							{{ orderDetail.start_street }}
						</view>
						<view class="copy" v-if="userInfo.now_role == 2" @click="handleCopy(orderDetail.start_address)">
							<image mode="widthFix" src="@/static/image/copy.png"></image>
							复制
						</view>
					</view>
					<view class="desc">
						{{ orderDetail.start_address }}
					</view>
				</view>
				<template v-if="userInfo.now_role == 2 && orderDetail.status == 2">
					<image @click="handleDial(orderDetail.order_phone)" class="dial" mode="widthFix"
						src="@/static/image/dial.png"></image>
					<view class="navigation"
						@click="handleNavigation(orderDetail.start_latitude, orderDetail.start_longitude)">
						<image mode="widthFix" src="@/static/image/dh1.png"></image>
						导航
					</view>
				</template>
			</view>
			<view class="address">
				<image src="@/static/image/shou.png"></image>
				<view class="right">
					<view class="name">
						<view class="text">
							{{ orderDetail.recipient_street }}
						</view>
						<view class="copy" v-if="userInfo.now_role == 2"
							@click="handleCopy(orderDetail.recipient_address)">
							<image mode="widthFix" src="@/static/image/copy.png"></image>
							复制
						</view>
					</view>
					<view class="desc">
						{{ orderDetail.recipient_address }}
					</view>
				</view>
				<template v-if="userInfo.now_role == 2 && orderDetail.status == 2">
					<image @click="handleDial(orderDetail.recipient_phone)" class="dial" mode="widthFix"
						src="@/static/image/dial.png"></image>
					<view class="navigation green"
						@click="handleNavigation(orderDetail.recipient_latitude, orderDetail.recipient_longitude)">
						<image mode="widthFix" src="@/static/image/dh2.png"></image>
						导航
					</view>
				</template>
			</view>
			<view class="distance">
				距离约<span>{{ orderDetail.linear_distance }}km</span>
			</view>
			<view class="images">
				<image :src="item" @click="handlePreviewImage(index)" v-for="(item, index) in orderDetail.pet_img"
					:key="index"></image>
				<view class="i"></view>
			</view>
		</view>
		<template v-if="userInfo.now_role == 1">
			<view v-if="orderDetail.status == 6" style="margin-top: 20px;">
				<up-button @click="handleRepublish" type="primary" plain
					text="重新发布"></up-button>
			</view>
			<template v-else>
				<template v-if="orderDetail.apply_driver_count > 0">
					<view class="bj" v-if="orderDetail.status == 1">
						<Candidate @change="orderInfo(orderDetail.id)" v-for="(item, index) in applyDriverList"
							:key="index" :id="orderDetail.id" :data="item"
							:className="index == applyDriverList.length-1 && 'last-candidate'" />
					</view>
				</template>
				<view class="matchmaking" v-else>
					正在匹配中...
				</view>
			</template>
		</template>
		<template v-else>
			<view class="" style="margin-top: 20rpx;"
				v-if="orderDetail.status == 1 && orderDetail.driver_apply_status == 4">
				<up-button @click="handleApply" type="primary" text="我要报名接单"></up-button>
			</view>
		</template>
		<!-- 图片记录 -->
		<Record
			v-if="orderDetail.status == 2 || orderDetail.status == 3 || orderDetail.status == 4||orderDetail.status == 5"
			:data="orderDetail" />
		<template v-if="userInfo.now_role == 1">
			<!-- 地图 -->
			<Map v-if="orderDetail.status == 3" :data="orderDetail"
				style="width: 100%; height: 366rpx;margin-top: 20rpx;" />
			<template v-if="orderDetail.driver_id != 0 && orderDetail.status == 2">
				<!-- 额外费用 -->
				<ExtraCharges :id="orderDetail.id" @change="orderInfo(orderDetail.id)" />
				<!-- 上传寄件记录 -->
				<UploadSend :id="orderDetail.id" @change="orderInfo(orderDetail.id)" />
			</template>
			<view class="bottom-button" v-if="orderDetail.status == 4">
				<view class="">
					<up-button @click="handleFinish" type="primary" plain text="完成订单"></up-button>
				</view>
				<view class="">
					<up-button @click="EvaluateRef.handleClick()" type="primary" text="去评价"></up-button>
				</view>
			</view>
		</template>
		<template v-else>
			<template v-if="orderDetail.driver_id != 0">
				<!-- 上传取件记录  -->
				<UploadSend v-if="orderDetail.status == 2" :type="2" :id="orderDetail.id"
					@change="orderInfo(orderDetail.id)" />
				<UploadSend v-if="orderDetail.status == 3" :type="3" :id="orderDetail.id"
					@change="orderInfo(orderDetail.id)" />
			</template>
		</template>
		<!-- 明细 -->
		<ExpenseBreakdown ref="ExpenseBreakdownRef" :data="orderDetail" />
		<!-- 评价 -->
		<Evaluate ref="EvaluateRef" :id="orderDetail.id" @change="orderInfo(orderDetail.id)" />
		<!-- 是否同意司机取消 -->
		<CancleAgree ref="CancleAgreeRef" :id="orderDetail.id" :data="orderDetail.driver_cancel_info"
			@change="orderInfo(orderDetail.id)" />
	</view>
</template>

<script setup>
	import Candidate from './components/candidate.vue'
	import ExtraCharges from './components/extra_charges.vue'
	import UploadSend from './components/upload_send.vue'
	import ExpenseBreakdown from '@/components/ExpenseBreakdown.vue'
	import Record from './components/record.vue'
	import Evaluate from './components/evaluate.vue'
	import Map from './components/map.vue'
	import CancelOrder from './components/cancel_order.vue'
	import CancleAgree from './components/cancel_agree.vue'
	import {
		useTripStore
	} from '@/store/index.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import trip from '@/api/trip.js'
	import utils from '@/utils/util.js'
	import order from '@/api/order.js'
	import {
		number
	} from '../../uni_modules/uview-plus/libs/function/test'
	const customStyle = {
		height: '50rpx',
		borderRadius: '10rpx !important'
	}
	const CancleAgreeRef = ref()
	onMounted(() => {
		let pages = getCurrentPages()
		let curParams = pages[pages.length - 1].options
		console.log(curParams);
		userInfo.value = uni.getStorageSync('userInfo')
		console.log('userInfo', userInfo.value);
		orderInfo(curParams.id)
	})
	const userInfo = ref({})
	const orderDetail = ref({})
	const orderInfo = async (id) => {
		const {
			status,
			info,
			data
		} = await order.orderInfo({
			id: id
		})
		if (status == 1) {
			console.log(data);
			orderDetail.value = data
			if (data.status == 7 && data?.driver_cancel_info?.user_agreest_cancel == 0 && userInfo.now_role == 1) {
				CancleAgreeRef.value.handleClick()
			}
			if (data.apply_driver_count > 0 && userInfo.value.now_role == 1 && data.status == 1) {
				getOrderApplyDriver(data.id)
			}
		}
	}
	const applyDriverList = ref([])
	// 获取报名司机列表
	const getOrderApplyDriver = async (id) => {
		const {
			status,
			info,
			data
		} = await order.getOrderApplyDriver({
			id: id
		})
		console.log('司机列表', status, data);
		if (status == 1) {
			applyDriverList.value = data
		}
	}
	// 查看费用明细
	const ExpenseBreakdownRef = ref()
	// 评价
	const EvaluateRef = ref()
	// 拨打司机电话
	const handleDial = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	// 复制
	const handleCopy = (val) => {
		uni.setClipboardData({
			data: val
		});
	}
	// 预览图片
	const handlePreviewImage = (index) => {
		// 预览图片
		uni.previewImage({
			urls: orderDetail.value.pet_img,
			current: index,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	// 导航
	const handleNavigation = (lat, lng) => {
		uni.openLocation({
			latitude: lat,
			longitude: lng,
			success: () => {
				console.log('success');
			}
		})
	}
	// 司机报名接单
	const handleApply = async () => {
		if (orderDetail.value.can_taking == 0) {
			utils.toast('请先购买相对的保证金')
			uni.navigateTo({
				url: '/pages/user/earnest_money'
			})
			return
		}
		const {
			status,
			info,
			data
		} = await order.driverApplyOrder({
			id: orderDetail.value.id
		})
		utils.toast(info)
		if (status == 1) {
			orderInfo(orderDetail.value.id)
		}
	}
	const handleRepublish = async () => {
		useTripStore().setDetail(orderDetail.value)
		uni.switchTab({
			url: '/pages/trip_or_receiving/index'
		})
		// let form = JSON.parse(JSON.stringify(orderDetail.value))
		// form.delivery_earliest_time = orderDetail.value.delivery_earliest_time_val
		// form.delivery_latest_time = orderDetail.value.delivery_latest_time_val
		// delete form.id
		// if(typeof form.delivery_type != 'number') {
		// 	form.delivery_type = form.delivery_type == '拼车'?1:2
		// }
		// console.log(form);
		// const {
		// 	status,
		// 	info,
		// 	data
		// } = await trip.placeOrder(form)
		// utils.toast(info)
		// if (status == 1) {
		// 	setTimeout(() => {
		// 		uni.navigateBack()
		// 	}, 2000)
		// }
	}
	// 订单完成
	const handleFinish = async () => {
		const {
			status,
			info,
			data
		} = await order.completeOrder({
			id: orderDetail.value.id
		})
		utils.toast(info)
		if (status == 1) {
			orderInfo(orderDetail.value.id)
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 20rpx 26rpx;

		.bj {
			background: #fff;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(128, 128, 128, 0.06);
			border-radius: 32rpx;
			padding: 26rpx;


			.flex {
				align-items: center;
				justify-content: space-between;

				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #000000;
					line-height: 34rpx;

					span {
						font-size: 48rpx;
					}

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}

				.button {
					width: 156rpx;
				}
			}

			.flex:first-child {
				margin-bottom: 20rpx;
			}

			.type {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
			}

			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #989898;
				line-height: 34rpx;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F1692B;
				line-height: 45rpx;
			}

			.pat {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				.label {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 15rpx;
					margin-right: 10rpx;
					height: 42rpx;
					background: rgba(100, 90, 240, 0.14);
					border-radius: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #645AF0;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #2C1F21;
				line-height: 38rpx;
			}

			.line-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 20rpx 0;

				.line {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc((100% - 40rpx) / 3);
					background: #FFF8F8;
					border-radius: 8rpx;
					height: 66rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #F1692B;
					line-height: 28rpx;
				}

				.line:nth-child(n+4) {
					margin-top: 20rpx;
				}

				.i {
					width: calc((100% - 40rpx) / 3);
				}
			}

			.address {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.dial {
					width: 64rpx;
				}

				.right {
					width: calc(100% - 40rpx - 114rpx - 64rpx);

					.name {
						display: flex;
						align-items: center;

						.text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #2C1F21;
							line-height: 33rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.copy {
							width: 140rpx;
							display: flex;
							align-items: center;
							font-family: PingFang SC,
								PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #F88531;
							line-height: 23rpx;

							image {
								margin-left: 20rpx;
								width: 20rpx;
								margin-right: 10rpx;
							}
						}
					}

					.desc {
						margin-top: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A6A1A1;
						line-height: 28rpx;
					}
				}

				.navigation {
					border: 1px solid;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 114rpx;
					height: 50rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #F1692B;
					line-height: 28rpx;

					image {
						width: 28rpx;
					}
				}

				.green {
					color: #689930;
				}
			}

			.distance {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #2C1F21;
				line-height: 39rpx;

				span {
					color: #F1692B;
				}
			}

			.images {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				image {
					width: calc((100vw - 164rpx) /3);
					height: calc((100vw - 164rpx) /3);
					border-radius: 16rpx;
				}

				image:nth-child(n+4) {
					margin-top: 30rpx;
				}

				.i {
					width: calc((100vw - 164rpx) /3);
				}
			}

			.receiver {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #2C1F21;
						line-height: 42rpx;
					}

					.plate {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #A6A1A1;
						line-height: 42rpx;
					}
				}
			}
		}

		.bj+.bj {
			margin-top: 18rpx;
		}

		.dial {
			width: 64rpx;
		}

		.matchmaking {
			margin-top: 40rpx;
			width: 100%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #F1692B;
			line-height: 50rpx;
		}

		.bottom-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			view {
				width: calc(50% - 20rpx);
			}
		}
	}
</style>